<template> 
	<div class="banner">
		<!-- 隐藏菜单 -->
		<div :class="[ {'default' : show } , 'slider' ]" >
			<p>
				<router-link to="/">登录</router-link> / <router-link to="/">注册</router-link>
			</p>
			<!-- 搜索 -->
			<form class="search">
				<i class="iconfont">&#xe662;</i>
				<input type="text" placeholder="泰国" />
			</form>
			<ul>
				<li v-for="item in menus" :key="item.id" style="width: 2rem;text-align: left;">
					<router-link to="/">{{item.name}}</router-link>
				</li>
			</ul>
		</div>
		<!-- 主界面 -->
		<div class="main">
			<!-- 顶部 -->
			<div class="banner-top">
				<!-- 城市切换 -->
				<div class="city">
					<label>
						<router-link to="/city">
							{{cityName}}
						</router-link>
					</label><i class="iconfont">&#xe601;</i>
				</div>
				<!-- 搜索 -->
				<form class="search">
					<i class="iconfont">&#xe662;</i>
					<input type="text" placeholder="泰国"  />
				</form>
				<!-- 导航按钮 -->
				<p class="slider-btn" @click="getShow()">
					<i class="iconfont">&#xe604;</i>
				</p>
			</div>
			
			<!-- 轮播区域 -->
			<div class="swiper banner-swiper">
				<!-- 主体的滑动区 -->
			    <ul class="swiper-wrapper">
			        <li v-for="item in src" :key="item.id" class="swiper-slide" >
						<img :src="item.tp" />
					</li>
			    </ul>
			    <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
			</div>
		</div>
	</div>
</template>

<script>
// 引入State的辅助函数
import {mapState} from 'vuex';
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);

//导出
export default{
	name:'Banner',
	data(){
		return{
			menus : [
				{ id:1 , url:'/' , name:'首页' },
				{ id:2 , url:'/' , name:'游侠攻略' },
				{ id:3 , url:'/' , name:'视频' },
				{ id:4 , url:'/' , name:'游记' },
				{ id:5 , url:'/' , name:'目的地' },
				{ id:6 , url:'/' , name:'圈子' },
				{ id:7 , url:'/' , name:'集市' },
				{ id:8 , url:'/' , name:'民宿营地' },
				{ id:9 , url:'/' , name:'APP' },
			],
			show : false,
			src:[
				{ id:1 , tp:require('@/assets/img/1.jpg')},
				{ id:2 , tp:require('@/assets/img/2.jpg')},
				{ id:3 , tp:require('@/assets/img/3.jpg')},
				{ id:4 , tp:require('@/assets/img/4.jpg')},
				{ id:5 , tp:require('@/assets/img/5.jpg')},
			]
		}
	},
	computed:{
		// 接受state内部的cityName变量
		...mapState(['cityName'])
	},
	methods:{
		getShow(){
			this.show = !this.show;
		}
	},
	//4.设置应用swiper的位置以及具体操作
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.banner-swiper' , {
				//循环播放
				loop : true,
				//设置分页器效果
				pagination : {
					el : '.swiper-pagination'
				},
				//设置播放项：时间，不停止，手指经过不暂停自动
				autoplay : {
					delay : 3000,
					stopOnLastSlide : false,
					disableOnInteraction : false,
				}
			} )
		} )
	},
	watch:{
		
	},
}
</script>

<style scoped>
a{
	color: black;
	text-decoration: none;
}
/* 测导航栏样式 */
.slider{
	position: absolute;
	left: -6.6rem;
	top: 0;
	z-index: 999;
	background-color: rgba(62,62,62,0.9);
	height: 100%;
	width: 6.6rem;
	transition: all 1s;
}
/* 动画选择器 */
.default{
	left: 0;
	transition: all 1s;
}
.slider a{
	text-decoration: none;
	color: white;
}
.slider p{
	line-height: 1.3rem;
	text-align: right;
	padding-right: 0.3rem;
	color: white;
	font-size: 0.35rem;
}
.slider .search{
	background-color: #3a3a3a;
	border-radius: 0.1rem;
	overflow: hidden;
	line-height: 0.8rem;
	width: 90%;
	margin: 0.3rem auto;
}
.slider .search i{
	display: inline-block;
	height: 100%;
	font-size: 0.45rem;
	padding-left: 0.2rem;
	vertical-align: middle;
	color: white;
}
.slider .search input{
	background-color: #3a3a3a;
	border: none;
	width: 80%;
	line-height: 0.8rem;
	text-indent: 1em;
	color: white;
}
.slider ul{
	margin: 0.5rem auto 0;
	width: 95%;
}
.slider ul li{
	line-height: 1.3rem;
	text-align: left;
	text-indent: 1em;
	font-size: 0.32rem;
	border-top: 0.04rem solid black;
}
.slider ul li a{
	display: block;
}
.slider ul li:last-child{
	border-bottom: 0.04rem solid black;
}
.main{
	position: relative;
	width: 100%;
	height: 5.6rem;
}
/* 顶部样式 */
.banner-top{
	position: absolute;
	left: 0;
	top: 0.3rem;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 0.8rem;
}
.banner-top .city{
	color: white;
	font-size: 0.35rem;
	line-height: 0.8rem;
	padding-left: 0.3rem;
	padding-right: 0.4rem;
}
.banner-top .city i{
	vertical-align: middle;
	padding-left: 0.1rem;
}
.banner-top .search{
	flex: 1;
	background-color: white;
	border-radius: 0.1rem;
	overflow: hidden;
	line-height: 0.8rem;
}
.banner-top .search i{
	display: inline-block;
	height: 100%;
	font-size: 0.45rem;
	padding-left: 0.2rem;
	vertical-align: middle;
}
.banner-top .search input{
	border: none;
	width: 80%;
	line-height: 0.7rem;
	text-indent: 1em;
}
.banner-top .slider-btn{
	color: white;
	padding-left: 0.4rem;
	padding-right: 0.3rem;
	line-height: 0.8rem;
	vertical-align: middle;
}
/* 轮播区域的样式 */
.banner-swiper{
	width: 1 00%;
	height: 5.6rem;
}
.banner-swiper img{
	width: 100%;
	height: 100%;
}
/* 穿透 */
.swiper-pagination :deep(.swiper-pagination-bullet-active){
	background-color: #ffdd40;
}
</style>
